import React, { Component } from 'react'
import { ScrollView, View, Image } from '@tarojs/components'
import DateTabs from '@components/DateTabs/index'
import Taro from '@tarojs/taro'
import { connect } from "react-redux"
import { chooseStore } from '@redux/actions'
import imgList from '@components/imgList'

import './index.scss'

class Stores extends Component {
  constructor(props) {
    super(props)
    this.state = {
      storeList: [{
        name: '金川足球公园',
        addr: '秦淮区佳营中路与青松路交叉路北200米',
        location: '1.5km',
        tags: ['好停车', 'WIFI', '更衣室', '浴室室']
      },
      {
        name: '金川足球公园',
        addr: '秦淮区佳营中路与青松路交叉路北200米',
        location: '1.5km',
        tags: ['好停车', 'WIFI', '更衣室', '浴室室','好停车', 'WIFI', '更衣室', '浴室室','好停车', 'WIFI', '更衣室', '浴室室']
      },{
        name: '金川足球公园',
        addr: '秦淮区佳营中路与青松路交叉路北200米',
        location: '1.5km',
        tags: []
      },{
        name: '金川足球公园',
        addr: '秦淮区佳营中路与青松路交叉路北200米',
        location: '1.5km',
        tags: []
      }]
    }
  }
  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }
  
  /**
   * 模拟日期切换
   * @param {*} value 
   */
  dateChange = (value) =>{
    if(value && value.day() == 2){
      this.setState({storeList: []})
    }else{
      if(!this.state.storeList.lastItem){
        this.setState({storeList: [{
          name: '金川足球公园',
          addr: '秦淮区佳营中路与青松路交叉路北200米',
          location: '1.5km',
          tags: ['好停车', 'WIFI', '更衣室', '浴室室']
        },
        {
          name: '金川足球公园',
          addr: '秦淮区佳营中路与青松路交叉路北200米',
          location: '1.5km',
          tags: ['好停车', 'WIFI', '更衣室', '浴室室','好停车', 'WIFI', '更衣室', '浴室室','好停车', 'WIFI', '更衣室', '浴室室']
        },{
          name: '金川足球公园',
          addr: '秦淮区佳营中路与青松路交叉路北200米',
          location: '1.5km',
          tags: []
        },{
          name: '金川足球公园',
          addr: '秦淮区佳营中路与青松路交叉路北200米',
          location: '1.5km',
          tags: []
        }]})
      }
    }
  }

  /**
   * 门店选择
   */
  handleStoreSelect = (store) =>{
    if(this.props.chooseStore){
      this.props.chooseStore(store, 0)
    }
    Taro.navigateTo({url: '../gameTimes/index'})
  }

  render () {
    const { storeList = [] } = this.state || {}
    return (
      <View className='storePage' enableFlex scrollY>
        <DateTabs onChange={this.dateChange}></DateTabs>
        <View className="filterBar">
          <View className="filterOption">全城<Image className='rightIcon' src={imgList.rightIcon}></Image></View>
          <View className="filterOption">综合排序<Image className='rightIcon' src={imgList.rightIcon}></Image></View>
          <View className="filterOption">筛选<Image className='rightIcon' src={imgList.rightIcon}></Image></View>
        </View>
        <ScrollView className='storeList' scrollY>
          {
            storeList.map((store,index) => <View key={index} className='item' onClick={() =>this.handleStoreSelect(store)}>
              <View className='name'>{store.name}</View>
              <View className='location'>
                <View className='addr'>{store.addr}</View>
                <View className='distince'>{store.location}</View>
              </View>
              {
                store.tags && <View className='tags'>
                  {
                    store.tags.map((tag,index) => <View key={index} className='tag'>{tag}</View>)
                  }
                </View>
              }
            </View>)
          }
          {
            !storeList.length &&
            <View className='empty'>
              <Image mode='scaleToFill' src=''>
              </Image>
              暂无活动推荐
            </View>
          }
        </ScrollView>
      </View>
    )
  }
}

export default connect(({store}) => ({store}), {chooseStore})(Stores)

